<template>
    <div class="infoList">
      <mt-header title="面向学院的教务管理系统">
        <router-link to="PersonInfo" slot="left">
          <mt-button icon="">设置</mt-button>
        </router-link>
        <!--<mt-button icon="more" slot="right" to="/PersonInfo"></mt-button>-->
      </mt-header>

      <div>
        <!-- 改变 ative 的值，与 <tab-container-item> 的 id 一致即显示对应页面。 -->
        <mt-navbar v-model="selected">
          <mt-tab-item id="newsNotice">新闻通告公告</mt-tab-item>
          <mt-tab-item id="course">课程管理</mt-tab-item>
          <mt-tab-item id="courseDesign">课程,毕业设计管理</mt-tab-item>
        </mt-navbar>

        <!-- tab-container -->
        <mt-tab-container v-model="selected">
          <!--不是滑动显示???-->
          <mt-tab-container-item id="newsNotice">
            <!--<mt-cell-swipe
              v-for="item in newsNotice"
              :title="item.title"
              :label="item.description"
              :right="[
                {
                  content: 'Delete',
                  style: { background: 'red', color: '#fff' },
                  handler: () => this.$messagebox('delete')
                }
              ]">
            </mt-cell-swipe>-->
            <!-- 没有删除权限 -->
            <mt-cell
              v-for=" (item , index) in newsNotice"
              :title="item.newsId"
              :label="item.description"
              is-link
              @click.native.prevent="checkDetails(index,newsNotice)"
            >
            </mt-cell>


          </mt-tab-container-item>
          <mt-tab-container-item id="course">
            <mt-cell  title="查看历史学期课程信息" to="HistoryCourse" is-link/>
            <mt-cell  title="查看下学期课程信息" to="CourseInfoList" is-link/>
            <mt-cell  title="教材订购的核实" to="ConfirmOrder" is-link/>
            <mt-cell  title="下载教学大纲" to="MainpointDownload" is-link/>
            <mt-cell  title="下载进度表" to="DownloadPlan" is-link/>
            <!--<mt-cell v-for="item in course" :title="item.title" :label="item.description" to="" is-link/>-->
          </mt-tab-container-item>
          <mt-tab-container-item id="courseDesign">
            <mt-cell
              title="查看课程设计任务安排"
              to="CourseDesignList"
              is-link
              value="">
            </mt-cell>
            <mt-cell
              title="查看毕业设计安排"
              to="GraduateDesignList"
              is-link
              value="">
            </mt-cell>
            <!--<mt-cell
              title="查看课程设计资料提交情况"
              to="CourseDataSubmit"
              is-link
              value="">
            </mt-cell>-->
            <!--<mt-cell v-for="item in courseDesign" :title="item.title" :label="item.description" />-->
          </mt-tab-container-item>
        </mt-tab-container>
      </div>
    </div>
</template>
<style>
</style>
<script>
    export default{
        name : 'infoList',
        data(){
            return{
                selected:'',
                newsNotice:[],
                course:[
                    {
                        url:'/CourseDetail',
                        title:'查看下学期课程信息',
                        description:''
                    }
                ],
                courseDesign:[]
            }
        },
        components:{
        },
        mounted:function(){
            this.$nextTick(function(){
                this.initList();
            })
        },
        methods:{
            initList:function(){
                // GET /someUrl
                this.$http.get('/static/dt.json').then(response => {
                    //get body news notice
                    for (const element of response.body.newsNotice){
                        //push to tableData[]
                        this.newsNotice.push(element);
                    }
                    // get body course
                    /*
                    for (const element of response.body.course){
                        //push to tableData[]
                        this.course.push(element);
                    }
                    */
                    // get body courseDesign
                    for (const element of response.body.courseDesign){
                        //push to tableData[]
                        this.courseDesign.push(element);
                    }
                }, response => {
                    // error callback
                    alert("no file page");
                });
            },

            //check news details
             checkDetails:function(index,rows){
                this.$router.push({ name: 'NewsDetails', params: { newsId: rows[index].newsId }})
             }
        }
    }
</script>
